<template>
  <div class="box_2_1 boxli">
    <div>
      <div>
        <span>通知用户:</span>
        <Switch @on-change="" true-color="#13ce66" false-color="#ff4949" />
      </div>
      <div>
        <span>审核结果:</span>
        <Switch @on-change="" true-color="#13ce66" false-color="#ff4949" />
      </div>
      <div style="margin-left: 50%;">
        <Button type="success">处理</Button>
      </div>
    </div>
    <div>
      <div>
        <span>违规类型:</span>
        <Select v-model="model1" clearable style="width:200px">
          <Option v-for="item in reason" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </div>
      <div>
        <span>详细原因:</span>
        <Input v-model="model2" clearable maxlength="20" placeholder="违规原因" style="width: 300px" />
      </div>
    </div>
    <div class="deal_box2">
      <div class="deal_box2_li" v-for="(item, inde) in deal_box" :key="inde">
        <span>ID：</span>
        <span>用户:</span>
        <span>系统检索:</span>
        <span>预览</span>
        <div class="pre_box"></div>
      </div>
      <div class="deal_box2_li">
        <span>ID：</span>
        <span>用户:</span>
        <span>系统检索:</span>
        <span>预览</span>
      </div>
      <Divider>到底了~</Divider>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

let model1 = ref();
let model2 = ref();
let reason = [
  { value: '内容违规', label: '内容违规' },
  { value: 'London', label: '内容无效' },
  { value: 'Sydney', label: '侵权行为' },
  { value: 'Ottawa', label: '状态错误' },
];
</script>

<style scoped>
.box_2_1 > div > div {
  display: inline-block;
  margin-left: 10px;
  margin-bottom: 20px;
}

.deal_box2 {
  height: 520px;
  overflow: scroll;
}

.deal_box2::-webkit-scrollbar {
  display: none;
}

:deep(div.deal_box2 > div.deal_box2_li:nth-child(even)) {
  height: 32px;
  font-size: 16px;
  line-height: 32px;
  width: 95%;
  margin-bottom: 5px;
  border-radius: 2px;
  background-color: #f8f8f9;
}

:deep(div.deal_box2 > div.deal_box2_li:nth-child(odd)) {
  height: 32px;
  font-size: 16px;
  line-height: 32px;
  width: 95%;
  margin-bottom: 5px;
  border-radius: 2px;
  background-color: #eaecf3;
}

:deep(.deal_box2_li > span) {
  margin-right: 20px;
}

:deep(.deal_box2_li > span):hover {
  color: #2d8cf0;
}

:deep(div.deal_box2 .pre_box) {
  color: red;
  width: 800px;
  height: auto;
  margin-left: 100px;
  padding: 1px;
  background-color: white;
}
</style>